<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="stylesheet" href="layui/css/layui.css" /> -->
		<style type="text/css">
			.line{
				background-color: aliceblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table border="1" cellpadding="10" cellspacing="0" bordercolor="#d0d0d0">
				<thead bgcolor="#F0F0F0">
					<tr style="color:#7B7B7B;">
					  <th>
						  <button type="button" @click="inverse()">反选</button>
						  <button type="button" @click="cancel()">取消</button>
						  <button type="button" @click="selectAll()">全选</button>
					  </th>
					  <th>编号</th>
					  <th>书籍名称</th>
					  <th>出版日期</th>
					  <th>价格</th>
					  <th>购买数量</th>
					  <th>操作</th>
					</tr>
				 </thead>
				 <tbody align="center">
					  <tr v-for="(item,index) in book" :key="item.id" :class="{line:item.isChecked}" @click="selected(item)">
						<td>
							<input type="checkbox" :checked="item.isChecked"/>
						</td>
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.date}}</td>
						<td>
						<!-- {{formatPrice(item.price)}} -->
						{{item.price | formatPrice}}
						</td>
						<td>
							<!-- <div>
								<button type="button" @keyup.enter="del(item)" @click="del(item)">-</button>
								{{item.num}}
								<button type="button" @keyup.enter="add(item)" @click="add(item)">+</button>
							</div> -->
							<component-num :item="item" @add="add(item)" @del="del(item)"></component-num>
						</td>
						<td>
							<input type="button" value="移除" @click="remove(index)"/>
						</td>
					  </tr>
				 </tbody>
			</table>
			<h3>{{message}}</h3>
			<h3>总价格：{{total | formatPrice}}</h3>
			<button type="button" class="layui-btn" @click="buy()">结算</button>
			<hr noshade size="3px" />
			<h2>-添加书籍-</h2>
			<form>
				编号：<input type="text" v-model="book.id"><br>
				书籍名称:<input type="text" v-model="book.name"><br>
				出版日期：<input type="text"  v-model="book.date"><br>
				价格：<input type="text"  v-model="book.price"><br>
				<input type="button" value="添加书籍" @click="addBook()" class="layui-btn">
			 </form>
		</div>
		
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="layui/layui.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var ComponentNum = {
				data:function(){
					return {};
				},
				// props:{
				// 	item:Object
				// },
				props:['item'],
				template: 
				`
				<div>
					<button type="button" @click="$emit('del')">-</button>
					{{item.num}}
					<button type="button" @click="$emit('add')">+</button>
				</div>
				`
			}
			
			let book = new Vue({
				el:'#app',
				data:{
					book:[
						{isChecked:false, id:1, date:'2010-10', price:60, num:1, name:'《java从入门到放弃》'},
						{isChecked:false, id:2, date:'2012-10', price:90, num:1, name:'《PHP从入门到放弃》'},
						{isChecked:false, id:3, date:'2013-10', price:80.01, num:1, name:'《Python从入门到放弃》'},
						{isChecked:false, id:4, date:'2011-10', price:70.02, num:1, name:'《什么都是从入门到放弃》'}
					]
				},
				components:{
					'component-num' : ComponentNum,
				},
				methods:{
					del:function(item){
						if(item.num == 1)
							return ;
						item.num--;
					},
					add:function(item){
						item.num++;
					},
					remove: function (index) {
						this.book.splice(index, 1);
						console.log(this.book.length);
					},
					selected:function(item){
							item.isChecked=!item.isChecked;
					},
					addBook:function(){
						this.book.push({ isChecked:false, id:this.book.id, date:this.book.date, price:parseFloat(this.book.price), num:1, name:this.book.name});
					},
					selectAll:function(){
						for(let k=0; k<this.book.length; k++){
							this.book[k].isChecked = true;
						}
					},
					inverse:function(){
						for(let k=0; k<this.book.length; k++){
							this.book[k].isChecked = !this.book[k].isChecked;
						}
					},
					cancel:function(){
						for(let k=0; k<this.book.length; k++){
							this.book[k].isChecked = false;
						}
					},
					buy:function(){
						let arr = [];
						let sum = 0;
						for(let item of this.book){
							if(item.isChecked){
								arr.push(item.id);
								sum += item.num * item.price;
							}	
						}
						if(sum == 0){
							alert('未选择商品');
							return ;
						}
						if(confirm('总价格为：'+sum.toFixed(2) + '元')){
							//正向遍历使用splice会使数组下标改变，而达不到效果
							/* 使用逆向遍历 */
							for(let i=this.book.length-1; i>=0; i--){
								console.log(i+"="+this.book[i].id);
								if(this.book[i].isChecked)
									this.book.splice(i,1);
							}
						}
					}
				},
				computed:{
					total:function(){
						return this.book.reduce((returnVal,nextItem) => returnVal + nextItem.price*nextItem.num,0)
					},
					// formatPrice:function(){
					// 	return function(price){
					// 		return '￥'+price.toFixed(2);
					// 	}
					// }
					/* 箭头函数 */
					// formatPrice:function(){
					// 		return price=>'￥'+price.toFixed(2);
					// }
					message:function(){
						if(this.book.length == 0)
							return '***************暂无商品在购物车中***************';
						else
							return '';
					}
				},
				filters:{
					formatPrice:price=>'￥'+price.toFixed(2)
				}
			})
		</script>
	</body>
</html>
